<template>
  <div id="edit-pwd">
    <el-input placeholder="请输入原密码" v-model="oriPwd" show-password clearable></el-input>
    <el-input placeholder="请输入新密码" v-model="newPwd" show-password clearable></el-input>
    <el-input placeholder="请再次输入新密码" v-model="newPwd2" show-password clearable></el-input>
    <div class="btn-section">
       <el-button type="primary" @click="goTo('/me/profile')">返回</el-button>
       <el-button type="danger" @click="submitEdit">修改</el-button>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {changeUserPwd} from './../../../api/index'
  import jm from '../../../../static/jm'
  import qs from 'qs';
  import axios from 'axios'
const BASE_URL = 'http://127.0.0.1:8886';

  export default {
    data(){
      return{
        oriPwd: '',
        newPwd: '',
        newPwd2: ''
      }
    },
    computed: {
      ...mapState(["userInfo"])
    },
    methods: {
      goTo(path){
        this.$router.replace(path);
      },

      toast(text) { //取消模态框
        this.$alert(text, '提示', {
          confirmButtonText: '确定',
          callback: action => {

          } });
      },
      submitEdit(){
        if(!this.newPwd || !this.newPwd2){
          this.$message('输入框内容不得为空！');
          return;
        }
        if(this.newPwd != this.newPwd2){
          this.$message('两次输入的新密码不一致！');
          return;
        }
        if(window.localStorage.getItem('token').length == 64)
        {
          axios.post(BASE_URL +'/user/change_password',
            qs.stringify({token:window.localStorage.getItem('token'), password:jm(this.oriPwd),new_password:jm(this.newPwd)}),
            {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then(re =>{
              console.log(re.data.备注)
              if(re.data.状态码 === 200)
              {
                this.toast("修改成功");
                console.log("ffffffff333");
              }
              else
              {
                console.log(re.data.备注);
              }
            })
            .catch((error =>{
              console.log(error)
            }))
        }

      }
    }
  }
</script>

<style scoped>
  #edit-pwd{
    padding-top: 10%;
    width: 100%;
    height: 100%;
  }
  .el-input{
    display: block;
    margin: 0 auto 20px;
    width: 30%;
  }
  p{
    margin-top: 40px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #999;
  }
  .btn-section{
    margin: 50px auto;
    width: 25%;

    display: flex;
    justify-content: space-between;
  }
  .btn-section .el-button{
    width: 100px;
    outline: none;
  }
</style>
